<template>
	<el-drawer v-model="drawer" title="描述" size="60%" :append-to-body="true" :modal-append-to-body="false">
		<span>{{ form.des }}</span>
	</el-drawer>
	<el-card style="width: 80%; margin: 0 auto; position: relative; top: 60px">
		<!--    第二行展示页-->
		<el-row style="margin-top: 10px">
			<el-col>
				<el-page-header @back="$route.go(-1)">
					<template #content>
						<h3>{{ form.name }}</h3>
					</template>
				</el-page-header>
			</el-col>

			<el-col>
				<el-carousel height="600px">
					<el-carousel-item v-for="(item, index) in form.imgList" :key="index.toString()">
						<img :src="item" style="width: 100%; height: 600px; object-fit: contain" />
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col>
				<el-descriptions :column="1" size="default" border>
					<el-descriptions-item label="所在地点">
						<el-tag>{{ form.address }}</el-tag>
					</el-descriptions-item>
				</el-descriptions>
			</el-col>
		</el-row>
		<!--    第三行详情页-->
		<el-divider>详情</el-divider>
		<h1 style="text-align: center">{{ form.name }}</h1>
		<div v-html="form.content"></div>
	</el-card>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue'

const $route = router
const systemStore = useSystemStore()
const form = reactive({
	id: undefined,
	name: undefined,
	cid: undefined,
	province: undefined,
	des: undefined,
	type: '隐藏',
	rate: undefined,
	file: undefined,
	content: undefined,
	img: undefined,
	createTime: undefined,
	updateTime: undefined,
	address: undefined,
	isCollect: undefined,
	imgList: []
})
import { Delete, PieChart, Star, View } from '@element-plus/icons-vue'
import router from '@/router'
import request from '@/utils/request'
import useSystemStore from '@/stores/system'
import { ElMessage } from 'element-plus'

const aid = ref('')
onBeforeMount(async () => {
	if ($route.currentRoute.value.query.id) {
		aid.value = $route.currentRoute.value.query.id
		await load()
	}
})
const handleCollet = async () => {
	const entity = {}
	entity.aid = form.id
	const res = await request.post(`/collect`, entity)
	ElMessage({
		message: `${res.data}`,
		type: 'success',
		showClose: true
	})
	await load()
}
const load = async () => {
	const res = await request.get(`/npc/${$route.currentRoute.value.query.id}`)
	Object.assign(form, res.data)
	form.imgList = JSON.parse(form.imgs).map(item => item.url)
}
const currentIndex = ref(0)
const drawer = ref(false)
</script>

<style scoped lang="scss">
.field {
	margin-bottom: 16px; /* 每个字段之间的间距 */
}

.text-limit {
	max-height: 48px; /* 设置固定高度（2行，假设每行24px） */
	line-height: 24px; /* 行高 */
	overflow: hidden; /* 超出部分隐藏 */
	display: -webkit-box; /* 支持多行显示 */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 限制为最多两行 */
	color: #666; /* 可以根据需要调整字体颜色 */
}
</style>
